<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">打卡记录</text>
		</view>
    
    <!-- 视图 -->
    <view class="CaraList">
      <view class="cara">
        <view class="btntext">
          <button >06月01日&nbsp;&nbsp;周一</button>
          <text class="dao">到课</text>
          <text class="weidao" hidden>未到</text>
          <text class="chidao" hidden>迟到</text>
        </view>
        <view class="keshi">
          <text>08 : 00~09 : 00</text>
          <text class="shu"></text>
          <text>小P老师</text>
          <text class="shu"></text>
          <text>1课时</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 222rpx;
}
/* 卡片视图 */
.CaraList {
  width: 690rpx;
  height: 1190rpx;
  background: #FFFFFF;
  box-shadow: 0px 5px 40px 0px rgba(192, 192, 192, 0.33);
  border-radius: 20rpx;
  /* background-color: #007AFF; */
  margin: 28rpx 30rpx;

}
.cara {
  width: 100%;
  height: 262rpx;
  /* background-color: red; */
}
.cara button {
  width: 273rpx;
  height: 63rpx;
  background: #8DCE2A;
  border-radius: 32rpx;
  text-align: center;
line-height: 63rpx;
font-size: 28rpx;
color: #FFFFFF;
margin: 39rpx auto 54rpx 50rpx;
}
.cara .btntext {
  display: flex;
  border: 1px solid #F5F5F5;
  
}
.btntext text {
  width: 63rpx;
  height: 30rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #8DCE2A;
  line-height: 30rpx;
  margin: 64rpx 49rpx 62rpx auto;

}
.dao {
   color: #8DCE2A;
}
.weidao {
  color: #FFCC33;
}
.chidao {
  color: #335EFF;
}
.keshi {
  display: flex;
  justify-content: space-around;
  line-height: 105rpx;
  border-bottom: 1px solid #F5F5F5;
}
.keshi text:nth-child(1) {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #777777;
}
.keshi .shu {
  width: 2rpx;
  height: 35rpx;
  margin-top: 18px;
  background: #AAAAAA;
}
.keshi text:nth-child(3) {
  width: 100rpx;
  height: 26rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #777777;
}
.keshi text:nth-child(5) {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #EA3131;
}
</style>
